<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="header">
                <slot>
                    <Form :model="formItem" :label-width="80">
                        <Row type="flex" justify="start" class="code-row-bg">
                            <Col span="4">
                                <FormItem label="用户名称">
                                    <Input v-model="formItem.input" placeholder="请输入用户名称"></Input>
                                </FormItem>
                            </Col>
                            <Col span="4.5">
                                <FormItem label="开始时间">
                                    <DatePicker type="date" placeholder="请输入开始时间" style="width: 200px" v-model="formItem.date"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="4.5">
                                <FormItem label="结束时间">
                                    <DatePicker type="date" placeholder="请输入结束时间" style="width: 200px" v-model="formItem.enddate"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <Button type="primary" style="margin-left: 20px" @click="sel(formItem.input,formItem.date,formItem.enddate)">查询</Button>
                            </Col>
                        </Row>
                    </Form>
                </slot>
            </template>
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" class="">

                    </Col>
                    <Col span="24" >
                        <Table border ref="selection" :columns="columns4.columns4Header"
                               :data="columns4.columns4Bodey">
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">

                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { op, sle_op } from '@/api/test'
export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      formItem: {
        input: '',
        date: '',
        enddate: ''
      },
      columns4: {
        columns4Header: [
          {
            title: '用户名',
            key: 'username'
          },
          {
            title: '资源名',
            key: 'rest_name'
          },
          {
            title: 'URL',
            key: 'rest_url'
          },
          {
            title: '操作',
            key: 'op'
          },
          {
            title: '操作时间',
            key: 'create_time'
          }
        ],
        columns4Bodey: []
      },
      //  计算总数
      pageOptions: {
        totalRecord: 0
      },
      // 传递参数：参数要全
      param: {
        page: 1,
        unit_id: 1
      }
    }
  },

  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      op(this.param).then(ret => {
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    sel (e1, e2, e3) {
      sle_op({ username: e1, starttime: e2, endtime: e3, page: 1 }).then(ret => {
        this.$common.xeUtils.toStringDate(starttime, 'yyyy-MM-dd')
        console.log(this.$common.xeUtils.toStringDate(starttime, 'yyyy-MM-dd'))
        this.columns4.columns4Bodey = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    }
  }

}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
